<template>
  <div>页面1</div>
  <el-button size="small" @click="postMessageMet">发送</el-button>
</template>

<script>
export default {
  data(){
    return{
      broadcastChannel: null,
    }
  },
  // 在Vue组件中
  mounted() {
    this.broadcastChannel = new BroadcastChannel('my_channel');
    this.broadcastChannel.onmessage = this.handleBroadcastMessage;
  },
  beforeUnmount() {
    console.log(111)
    this.broadcastChannel.close();
    this.broadcastChannel = null
  },
  methods: {
    handleBroadcastMessage(event) {
      console.log('收到广播消息:', event.data);
    },
    postMessageMet(){
      this.broadcastChannel.postMessage({ type: 'message', data: 'Hello from other tab!' });
    }
  }
}
</script>